---
id: 抽离和压缩CSS
title: 优化-抽离和压缩CSS
---

- 未处理的 css 在被打包在 js 文件内的。(没有演示)

### 抽离并压缩 CSS

` npm i mini-css-extract-plugin -D`

```js

```



### MiniCssExtractPlugin 插件

## `npm install --save-dev mini-css-extract-plugin`

截图：

```js
// webpack.config.js
plugins: [
    new MinicssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].chunk.css'
    })
]
rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],

optimization:{
    usedExports:true,
    minimizer: [new OptimizeCSSAssetsPlugin({})]
}

performance: false

```

```js
// package.json
"sideEffects":["*.css"]

```

---

```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};
```
